<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="生态、农业">
    <!-- meta:kw -->
    <meta name="keywords" content="养殖、饲养、出售">
    <title>态有源生态农业</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <style>
        /* 清除默认样式的代码 */
/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
  margin: 0;
  padding: 0;
}

/* 內减模式 */
* {
    box-sizing: border-box;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

/* 去除列表默认样式 */
ul,
ol {
  list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}

/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
  vertical-align: middle;
}

/* 去除input默认样式 */
input {
  border: none;
  outline: none;
  color: #333;
}

/* 左浮动 */
.fl {
  float: left;
}

/* 右浮动 */
.fr {
  float: right;
}

/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.wrapper{
    width:1240px;
    margin: 0 auto;
}
/* 快捷导航 */
.shortcut{
    height: 52px;
    background-color: #333;
}
.shortcut .wrapper{
    height: 52px;
    line-height: 52px;
}
.shortcut li a{

    padding: 0 16px;
    font-size: 14px;
    color:#dcdcdc;
    border-right: 1px solid #666;
    /* border-left:#666; */
}
.shortcut li a:hover {
    color:#27ba9b;
}
.shortcut li:last-child a{
    border-right:0;
    padding-right:0;
}
.shortcut li  a i{
    display: inline-block;
    width:11px;
    height: 16px;
    margin-right:8px;
    vertical-align: -2px;
    background-image: url(../images/sprites.png);
    background-position: -160px -69px;
}

/* header */
.header {
    margin:30px auto;
}
.header .logo h1 {
    width:207px;
    height: 70;
    /* background-color: pink; */
}
.header .logo h1 a{
    display: block;
    width: 70px;
    height: 70px;
    background-image: url(/taiyouyuanwangye/images/logo.jpg);
    background-size: contain;
    font-size: 0;
}
.header .nav {
margin-left: 40px;
}
.header .nav li{
    margin-right:48px;
    line-height: 70px;
}
.header .nav li a{
    padding-bottom:7px;
    border-bottom:1px solid transparent;
}
.header .nav li a:hover{
    color:#27ba9b;
    border-bottom-color:#27ba9b ;
}
.header .search {
    width: 172px;
    height: 30px;

    margin-left: 34px;
    margin-top:24px;
    border-bottom: 2px solid #e7e7e7;
}
.header .search input{
    width: 152px;
    height: 28px;
    padding-left: 11px;
}
.header .search input::placeholder{
    font-size: 14px;
    color:ccc;

}
.header .search i{
    display: inline-block;
    margin-left:2px;
    width: 18px;
    height: 18px;

    vertical-align: middle;
    background-image: url(../images/sprites.png);
    background-position: -79px -70px;
}
.header .cart{
    position: relative;
    width:23px;
    height:23px;
    margin-top:28px;
    margin-left: 15px;
    background-image: url(../images/sprites.png);
    background-position: -119px -70px;
}
.header .cart span{
    position: absolute;
    right:-10px;
    top:-7px;
    width: 20px;
    height: 15px;
    background-color: #e26237;
	border-radius: 8px;
    text-align: center;
    line-height: 15px;
    font-size: 13px;
    color:#fff;
}
/* 版权footer */
.footer{
    height: 342px;
    background-color: #333;

}
.footer .wrapper{
    width: 1393px;
    height: 342px;

}
.footer .top{
    height:175px;
    padding-top: 60px;
    padding-left: 134px;
    border-bottom:3px solid #434343;
}
.footer .top li{
    width: 195px;
    height: 58px;

    margin-right:298px;
}
.footer .top li{
    line-height: 58px;
    font-size: 28px;
    color: #fff;
}
.footer .top li:last-child{
    margin-right:0;
}
.footer .top li i {
    display: inline-block;
    width: 58px;
    height: 58px;

    background-image: url(../images/sprites.png);
    vertical-align: -18px;
    margin-right: 19px;
}
.footer .top li:first-child i{
     background-position: 0 0;
}
.footer .top li:nth-child(2) i{
    background-position: -130px 0;
}
.footer .top li:last-child i {
    background-position: -64px 0;
}
.footer .bottom {
    padding-top: 40px;
}
.footer .bottom p {
    margin-bottom:20px;
    text-align:center;
    font-size: 14px;
    color:#999;
}
.footer .bottom p a{
    color:#999;
}
.footer .bottom p a:hover{
    color:#fff;
}
/* banner */
.banner{
    height: 500px;
    background-color: #f5f5f5;
}
.banner .wrapper{
    position: relative;
    height: 500px;
    background-color: yellow;
}
.banner .leftnav {
    position: absolute;
    left:0;
    top:0;
    width: 250px;
    height: 500px;
    background-color: rgba(0,0,0,.8);
}
.banner .leftnav li{
    position: relative;
    padding-left: 36px;
}
.banner .leftnav li:hover {
    background-color: #27ba9b;;
}
.banner .leftnav li a{
    display:inline-block;
    margin-right: 15px;
    line-height: 50px;
    font-size: 14px;
    color:#ddd;
}
.banner .leftnav li a:hover {
    color:#fff;
}
.banner .leftnav li a:first-child{
    font-size: 16px;
}
.banner .leftnav li::after{
    position: absolute;
    right:15px;
    top:19px;
    content:'';
    width:6px;
    height: 11px;
    /* background-color: yellow; */
    background-image: url(../images/sprites.png);
    background-position: -79px -109px;
    
}
.banner .prev,.banner .next{
    position: absolute;
    top:228px;
    width: 44px;
    height: 44px;
    background-color: rgba(0,0,0,.2);
    background-image: url(../images/sprites.png);
    border-radius: 22px;

}
.banner .prev{
    left:260px;
    background-position: 13px -59px;
}
.banner .next{
    right:10px;
    background-position: -22px -58px;
}
.banner ol {
    position: absolute;
    left:680px;
    bottom:30px;
  
}
.banner ol li{
    float:left;
    width:10px;
    height: 10px;
    background-color: rgba(255,255,255,.4);
    border-radius: 50%;
    margin-right: 24px;
}
.banner ol .current{
    background-color: #fff;
}

/* 新鲜好物 */
.new-goods{
    margin-top: 48px;
    /* background-color: pink; */
}
 
.hd{
    height:29px;
    margin-bottom:37px;
}
.hd h2{
    float: left;
    font-size: 29px/1;
    font-weight: normal;

}
.hd h2 span{
    font-size: 16px;
    color:#999;
    margin-left: 34px;
}
.hd .more{
    float:right;
    color:#999;
    line-height: 1;
    margin-top:11px;
}
.hd .more::after{
    content:'';
    display: inline-block;
    width: 7px;
    height: 13px;
 
    background-image: url(../images/sprites.png);
    background-position: 0 -109px;
    margin-left: 20px;
}
.bd .goodBox{
    float: left;
    width: 304px;
    height: 405px;
    background-color: #ff0;
    margin-right:8px;
}
.new-goods .bd .goodBox{
    background-color: #f0f9f4;
}
.bd .goodBox img{
    width:304px;
}
.bd .goodBox:nth-child(4n){
    margin-right:0;
}
.bd .goodBox h3{
    margin-top: 20px;
    text-align: center;
    font-size: 20px;
    font-weight: normal;
    line-height: 1;
}
.bd  .price{
    line-height: 1;
    margin-top:15px;
    text-align: center;
    font-size: 23px;
	color: #9a2e1f;
}
.bd .goodBox .price span{
    font-size: 17px;
}
.popular {
    margin-top: 47px;
}
.popular .bd .goodBox{
    background-color: #fff;
}
.popular .bd p{
    margin-top: 15px;
    text-align: center;
    color:#999;

}
/* 热门品牌 */
.brand-goods{
    background-color:  #f5f5f5;
    /* background-color: yellow; */
}
.goodsPic{
    float: left;
    width: 244px;

    margin:22px 0 45px 5px;
}
.goodsPic img{
    width: 244px;
}
.brand-goods .goodsPic:nth-child(5n+1){
    margin-left: 0;
}
.brand-goods .bd{
    position: relative;
}
.brand-goods  .bd .prev,.brand-goods .bd .next{
    position: absolute;
  
    top:-18px;
    width: 20px;
    height: 20px;
    background-color: #e2e2e2;
    background-image: url(../images/sprites.png);
    background-position: -72px -105px;
}
.brand-goods  .bd .prev:hover,.brand-goods .bd .next:hover{
    background-color: #27ba9b;
}
.brand-goods .bd .prev{
    right:35px;
    transform:rotate(180deg);
}
.brand-goods .bd .next{
    right:1px;
}
/* 生鲜 */
.fresh{
    margin-top: 34px;
}
.hd .menu{
    margin-right: 58px;
}
.hd .menu li{
    margin-left: 6px;
    margin-top:6px;
    float:left;
}
.hd .menu li a{
    padding:2px 7px;
    line-height: 1;
    
}
.hd .menu li a:hover{
    background-color: #27ba9b;
    color:#fff;
}
.bd .left {
    width: 240px;
}
.bd .right{
    width: 1000px;
}
.bd .right li{
    position: relative;
    width: 242px;
    height: 304px;
   
    margin:0 0 2px 8px;
    border:2px solid transparent;
    overflow:hidden;
}
.bd .right li img{
    width:184px;
    margin:6px 27px;
}
.fresh .bd h3{
    font-size: 16px;
    margin-left: 27px;
    font-weight: normal;
    line-height: 1.2;
}
.bd .right li:hover{
    border:2px solid #27ba9b;
}
.bd .right li:hover .seem{
    bottom:0;
}
.bd .right li .seem{
    position: absolute;
    left:-2px;
    bottom:-84px;
    width: 242px;
    height: 84px;
    background-color: #27ba9b;
    transition:bottom 1s;
    text-align:center;
}
.bd .right li .seem .top{
    width: 125px;
    height:30px;
    margin: 14px auto;
    border-bottom: 2px solid #a9dbcc;
    font-size:18px;
    line-height: 30px;
    color:#fff;
}
.bd .right .seem a{
    display:block;
    margin:8px auto;
    color:#fff;
    font-size: 13px;

}
.bottom-nav{
    height:300px;

}
.bottom-nav li{
    float: left;
    margin:80px 50px 0;

}
.bottom-nav h3{
    text-align: center;
    color:#999;
}
.bottom-nav .content{
    margin-top: 35px;
}
.bottom-nav .left,.bottom-nav .right{
width: 105px;
height: 105px;
text-align: center;
background-color: #fff;
margin-right:5px;
}

.bottom-nav .left .weixin{
    display: inline-block;
    width: 36px;
    height: 29px;

    background-image: url(../images/sprites.png);
    background-position: -249px -15px;
    margin-top: 19px;
}
.bottom-nav .left .weixin:hover{
    background-position:-204px -15px;
}

.bottom-nav .right .weibo{
    display: inline-block;
    width: 36px;
    height: 29px;
 
    background-image: url(../images/sprites.png);
    background-position: -350px -15px;
    margin-top: 19px;
}
.bottom-nav .right .weibo:hover{
    background-position: -300px -15px;
}
.bottom-nav .left .code{
    width:103px;
}
.bottom-nav .right .code-p{
    font-size: 14px;
    padding-left: 8px;
    color:#999;
    text-align: left;
}
.bottom-nav .right a{
    display:block;
    height:32px;
    margin-top: 18px;
    font-size: 14px;
    color:#fff;
    line-height: 32px;
    text-align: center;
    background-color: #27ba9b;
}
.phone{
    margin-top: 58px;
    font-size: 22;
    color:#666;
    text-align: center;
}
.time{
    margin-top: 17px;
    font-size: 15px;
    color:#999;
    text-align: center;
}
.bottom-nav .left .server{
    display: inline-block;
    width: 36px;
    height: 29px;

    background-image: url(../images/sprites.png);
    background-position: -249px -70px;
    margin-top: 19px;
}
.bottom-nav .left .server:hover{
    background-position:-204px -70px;
}

.bottom-nav .right .ques{
    display: inline-block;
    width: 36px;
    height: 29px;
 
    background-image: url(../images/sprites.png);
    background-position: -350px -70px;
    margin-top: 19px;
}
.bottom-nav .right .ques:hover{
    background-position: -300px -70px;
}
    </style>
    
</head>
<body>
    <!-- 快捷导航 -->
  <div class="shortcut">
    <div class="wrapper">
        <ul class="fr">
            <li class="fl"><a href="login2.html">请先登录</a></li>
            <li class="fl"><a href="">免费注册</a></li>
            <li class="fl"><a href="">我的订单</a></li>
            <li class="fl"><a href="">会员中心</a></li>
            <li class="fl"><a href="">帮助中心</a></li>
            <li class="fl"><a href="">在线客服</a></li>
            <li class="fl"><a href=""><i></i>手机版</a></li>
        </ul>
    </div>
  </div>
  <!-- 头部header -->
  <div class="header wrapper clearfix">
    <!-- logo -->
    <div class="logo fl">
        <h1><a href="http://www.baidu.com">小兔鲜儿</a></h1>
    </div>
    <!-- 导航 -->
    <div class="nav fl">
        <ul>
            <li class="fl"><a href="http://www.baidu.com">首页</a></li>
            <li class="fl"><a href="http://www.baidu.com">生鲜</a></li>
            <li class="fl"><a href="http://www.baidu.com">美食</a></li>
            <li class="fl"><a href="http://www.baidu.com">餐厨</a></li>
            <li class="fl"><a href="http://www.baidu.com">电器</a></li>
            <li class="fl"><a href="http://www.baidu.com">居家</a></li>
            <li class="fl"><a href="http://www.baidu.com">洗护</a></li>
            <li class="fl"><a href="http://www.baidu.com">孕婴</a></li>
            <li class="fl"><a href="http://www.baidu.com">服装</a></li>
         
        </ul>
    </div>
    <!-- 搜索 -->
    <div class="search fl"><i></i><input type="text"placeholder="搜一搜"></div>
    <!-- 购物车 -->
    <div class="cart fl"><span>2</span></div>
  </div>
  <!--头部header end -->


   <!-- banner -->
   <div class="banner">
    <div class="wrapper">
        <ul>
            <li class="adp"><a href="http://www.gztyy.com"><img src="/images/logo.jpg" alt=""></a></li>
        </ul>
        <div class="leftnav">
            <ul>
                <li><a href="#">生鲜</a> <a href="#">水果</a><a href="#">蔬菜</a></li>
                <li><a href="#">美食</a> <a href="#">面点</a><a href="#">蔬菜</a></li>
                <li><a href="#">餐厨</a> <a href="#">数码产品</a></li>
                <li><a href="#">电器</a> <a href="#">床品</a><a href="#">四件套</a><a href="#">背枕</a></li>s
                <li><a href="#">居家</a> <a href="#">奶粉</a><a href="#">玩具</a><a href="#">辅食</a></li>
                <li><a href="#">洗护</a> <a href="#">洗发</a><a href="#">洗护</a><a href="#">美妆</a></li>
                <li><a href="#">孕婴</a> <a href="#">奶粉</a><a href="#">玩具</a></li>
                <li><a href="#">服饰</a> <a href="#">男装</a><a href="#">女装</a></li>
                <li><a href="#">杂货</a> <a href="#">户外</a><a href="#">图书</a></li>
                <li><a href="#">品牌</a> <a href="#">品牌制造</a></li>
            </ul>
        </div>
        <a href="" class="prev"></a>
        <a href="" class="next"></a>
        <ol>
            <li></li>
            <li></li>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
  </div>
  <!-- 新鲜好物 -->
  <div class="new-goods wrapper">
    <div class="hd">
        <h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
        <a class="more" href="#">查看全部</a>
    </div>
    <div class="bd clearfix">
        <ul>
            <li class="goodBox">
                <img src="uploads/new_goods_1.jpg" alt="">
                <h3>睿米无线吸尘器F8</h3>
                <p class="price"><span>￥</span>899</p>
            </li>
            <li class="goodBox">
                <img src="uploads/new_goods_2.jpg" alt="">
                <h3>智能环绕3D空调</h3>
                <p class="price"><span>￥</span>1299</p>
            </li>
            <li class="goodBox">
                <img src="uploads/new_goods_3.jpg" alt="">
                <h3>广东软软糯米煲仔饭</h3>
                <p class="price"><span>￥</span>129</p>
            </li>
            <li class="goodBox">
                <img src="uploads/new_goods_4.jpg" alt="">
                <h3>罗西机械智能手表</h3>
                <p class="price"><span>￥</span>3399</p>
            </li>
        </ul>
    </div>
  </div>
  <!-- 人气推荐 -->
  <div class="popular wrapper">
    <div class="hd">
        <h2>人气推荐<span>人气爆款 不容错过</span></h2>
    </div>
    <div class="bd clearfix">
        <ul>
            <li class="goodBox">
                <img src="uploads/popular_1.jpg" alt="">
                <h3>特惠推荐</h3>
              <p>我猜得到 你的需要</p>
            </li>
            <li class="goodBox">
                <img src="uploads/popular_2.jpg" alt="">
                <h3>爆款推荐</h3>
                <p>人气好物推荐</p>
            </li>
            <li class="goodBox">
                <img src="uploads/popular_3.jpg" alt="">
                <h3>场景使用一站买全</h3>
                <p>编辑精心整理推荐</p>
            </li>
            <li class="goodBox">
                <img src="uploads/popular_4.jpg" alt="">
                <h3>领券中心</h3>
                <p>发现更多超值优惠券</p>
            </li>
        </ul>
    </div>

    </div>
  </div>
  <!-- 热门品牌 -->
  <div class="brand-goods">
    <div class="wrapper">
        <div class="hd">
            <h2>热门品牌<span>国际经典 品质保证</span></h2>
        </div>
        <div class="bd clearfix">
            <ul>
                <li class="goodsPic"><img src="uploads/brand_goods_1.jpg" alt=""></li>
                <li class="goodsPic"><img src="uploads/brand_goods_2.jpg" alt=""></li>
                <li class="goodsPic"><img src="uploads/brand_goods_3.jpg" alt=""></li>
                <li class="goodsPic"><img src="uploads/brand_goods_4.jpg" alt=""></li>
                <li class="goodsPic"><img src="uploads/brand_goods_5.jpg" alt=""></li>
            </ul>
            <i class="prev"></i><i class="next"></i>
        </div>
        
    </div>
  </div>
  <!-- 生鲜 -->
  <div class="fresh wrapper">
    <div class="hd">
        <h2>生鲜</h2>
        <a class="more" href="#">查看全部</a>
        <ul class="menu fr">
            <li><a href="#">水果</a></li>
            <li><a href="#">蔬菜</a></li>
            <li><a href="#">肉禽蛋</a></li>
            <li><a href="#">裤装</a></li>
            <li><a href="#">T恤</a></li>
            <li><a href="#">衬衫</a></li>
            <li><a href="#">内衣</a></li>
        </ul>
    </div>
    
    <div class="bd clearfix">
        <div class="left fl"><img src="uploads/fresh_goods_cover.png" alt=""></div>
        <div class="right fl">
            <ul>
                <li class="fl">
                    <img src="uploads/fresh_goods_1.jpg" alt="">
                    <h3>红功夫 麻辣小龙虾1.5kg<br/>
                        4-6钱/25-32只<br/>
                       火锅食材 </h3>
                       <p class="price"><span>￥</span>899</p>
                       <div class="seem">
                        <div class="top">找相似</div>
                        <a href="#">发现更多宝贝></a>
                       </div>
                </li>
                <li class="fl">
                    <img src="uploads/fresh_goods_1.jpg" alt="">
                    <h3>红功夫 麻辣小龙虾1.5kg<br/>
                        4-6钱/25-32只<br/>
                       火锅食材 </h3>
                       <p class="price"><span>￥</span>899</p>
                </li>
                <li class="fl">
                    <img src="uploads/fresh_goods_1.jpg" alt="">
                    <h3>红功夫 麻辣小龙虾1.5kg<br/>
                        4-6钱/25-32只<br/>
                       火锅食材 </h3>
                       <p class="price"><span>￥</span>899</p>
                </li>
                <li class="fl">
                    <img src="uploads/fresh_goods_1.jpg" alt="">
                    <h3>红功夫 麻辣小龙虾1.5kg<br/>
                        4-6钱/25-32只<br/>
                       火锅食材 </h3>
                       <p class="price"><span>￥</span>899</p>
                </li>
                <li class="fl">
                    <img src="uploads/fresh_goods_1.jpg" alt="">
                    <h3>红功夫 麻辣小龙虾1.5kg<br/>
                        4-6钱/25-32只<br/>
                       火锅食材 </h3>
                       <p class="price"><span>￥</span>899</p>
                </li>
                <li class="fl">
                    <img src="uploads/fresh_goods_1.jpg" alt="">
                    <h3>红功夫 麻辣小龙虾1.5kg<br/>
                        4-6钱/25-32只<br/>
                       火锅食材 </h3>
                       <p class="price"><span>￥</span>899</p>
                </li>
                <li class="fl">
                    <img src="uploads/fresh_goods_1.jpg" alt="">
                    <h3>红功夫 麻辣小龙虾1.5kg<br/>
                        4-6钱/25-32只<br/>
                       火锅食材 </h3>
                       <p class="price"><span>￥</span>899</p>
                </li>
                <li class="fl">
                    <img src="uploads/fresh_goods_1.jpg" alt="">
                    <h3>红功夫 麻辣小龙虾1.5kg<br/>
                        4-6钱/25-32只<br/>
                       火锅食材 </h3>
                       <p class="price"><span>￥</span>899</p>
                </li>
            </ul>
        </div>
    </div>
  </div>
  <!-- 底部导航 -->
  <div class="bottom-nav wrapper">
    <ul>
        <li>
            <h3>客户服务</h3>
            <div class="content clearfix">
                <div class="left fl">
                    <i class="server"></i>
                    <p>在线客服</p>
                </div>
                <div class="right fl">
                    <i class="ques"></i>
                    <p>问题反馈</p>
                </div>
            </div>
        </li>
        <li>
            <h3>关注我们</h3>
            <div class="content clearfix">
                <div class="left fl">
                    <i class="weixin"></i>
                    <p>公众号</p>
                </div>
                <div class="right fl">
                    <i class="weibo"></i>
                    <p>微博</p>
                </div>
            </div>
        </li>
        <li>
            <h3>下载APP</h3>
            <div class="content clearfix">
                <div class="left fl">
                   <img class="code"src="uploads/qrcode.png" alt="">
                </div>
                <div class="right fl">
                    <p class="code-p">扫描二维码<br>立马下载APP</p>
                    <a href="#">下载页面</a>
                </div>
            </div>
        </li>

        <li>
            <h3>服务热线</h3>
            <p class="phone">400-0000-000</p>
            <p class="time">周一至周日 8:00-18:00</p>
        </li>
    </ul>
  </div>
  <!-- 版权footer -->
  <div class="footer">
    <div class="wrapper">
     <div class="top">
        <ul>
            <li class="fl"><i></i>价格亲民</li>
            <li class="fl"><i></i>物流便捷</li>
            <li class="fl"><i></i>品质新鲜</li>
        </ul>
     </div>
     <div class="bottom">
        <p>
            <a href="#">关于我们</a> | 
            <a href="#">帮助中心</a> | 
            <a href="#">售后服务</a> | 
            <a href="#">配送与验收</a> | 
            <a href="#">商务合作</a> | 
            <a href="#">搜索推荐</a> | 
            <a href="#">友情链接</a>
        </p>
        <p>CopyRight @ 贵州态有源生态农业有限公司</p>
     </div>
     </div>
  </div>
  
 
</body>
</html>